<template>
    <div class="bigBox">
        <div class="box">
            <a-textarea v-model:value="keywords" placeholder="请输入文本" class="left" @change="changeKeyword" allowClear />
            <div class="right">
                <a-select ref="select" v-model:value="type" style="width:50%" :options="options"
                    @change="handleChange"></a-select>
                <div class="text">
                    {{ text }}
                </div>
                <p>
                    <a-button @click="copyToClipboard" shape="circle" :icon="h(CopyOutlined)" />
                </p>
            </div>
        </div>
        <div class="baidu">
            <baiduKnows></baiduKnows>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import type { SelectProps } from 'ant-design-vue'
import { translateKeyword } from '@/api/index'
import { CopyOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import _ from 'lodash'
import baiduKnows from './baiduKnows.vue'
// target_lang
const keywords = ref('')
const type = ref('en')
const text = ref('')
const options = ref<SelectProps['options']>([
    {
        value: 'en',
        label: '英语',
    },
    {
        value: 'zh-CN',
        label: '简体中文',
    },
    {
        value: 'zh-TW',
        label: '繁体中文',
    },
])
const getData = async () => {
    const obj = {
        text: keywords.value,
        target_lang: type.value
    }
    const result = await translateKeyword(obj)
    text.value = result.data.translate_result
}
const changeKeyword = _.debounce(() => {
    if (keywords.value) {
        getData()
    }
}, 600)
const handleChange = (value: string) => {
    getData()
    console.log(value);
};
const copyToClipboard = () => {
    navigator.clipboard.writeText(text.value)
        .then(() => {
            message.success({
                content: () => '内容复制成功！',
                style: {
                    color: 'green'
                },
            })
        })
        .catch(err => {
            message.error({
                content: () => '内容复制失败' + err + "!",
                style: {
                    color: 'red'
                },
            })
        });
}

</script>

<style scoped lang="scss">
.bigBox {
    height: 100%;
    overflow: auto;
    @include scroll_bar();

    .box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 20px;

        .left {
            width: 100%;
            height: 300px;
            border: 1px solid rgba(128, 128, 128, 0.381);
            font-size: 18px;
            @include scroll_bar();
        }

        .right {
            padding: 10px;
            width: 100%;
            height: 300px;
            border: 1px solid rgba(128, 128, 128, 0.381);
            border-radius: 5px;

            .text {
                text-indent: 2rem;
                margin: 10px 0;
                font-size: 18px;
                height: 70%;
                background-color: rgba(196, 226, 255, 0.285);
                padding: 5px;
                border-radius: 5px;
                overflow-y: auto;
                word-wrap: break-word;
                @include scroll_bar(white);

            }

            p {
                text-align: right;
            }
        }
    }
}
</style>